<template>
<!--  告警状态-->
  <div class="gjzt-container flex-column">
    <div id="gjzt" style="width: 100%; height: 140px;"></div>
    <div class="progress-bar flex-row flex-item">
      <img class="left-center-content-round-img" src="../imgs/round.png" alt="">
      <div class="progress-bar-container flex-column flex1">
        <div class="progress-bar-item flex-column">
          <div class="label-val flex-row">
            <div class="label">已处理</div>
            <div class="flex1"></div>
            <div class="value">{{ dealInfo.deal }}</div>
          </div>
          <div class="progress-bar-bg">
            <div class="progress-bar-value" :style="{width: barWidth(dealInfo.deal)}"></div>
          </div>
        </div>
        <div class="progress-bar-item flex-column unhandle">
          <div class="label-val flex-row">
            <div class="label">未处理</div>
            <div class="flex1"></div>
            <div class="value">{{ dealInfo.notDeal }}</div>
          </div>
          <div class="progress-bar-bg">
            <div class="progress-bar-value" :style="{width: barWidth(dealInfo.notDeal)}"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const echarts = require('echarts/lib/echarts')
export default {
  data() {
    return {
      chartData: [
      ],
      myChart: null,
      colorList: ['#FF6E76', '#58D9F9', '#48E0D6'],
      dealInfo: {
        notDeal: 0,
        deal: 0
      }
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeFn, true);
    this.myChart?.dispose();
  },
  mounted() {
    this.initChart()
  },
  methods: {
    barWidth(val) {
      const { deal, notDeal } = this.dealInfo
      if (deal + notDeal) {
        return val / (deal + notDeal) * 100 + '%'
      }
      return 0
    },
    getChartData(network) {
      this.$http.get('/dataView/getScreenAlarm', {
        params: { network: network }
      }).then(res => {
        const { notDeal, deal } = res
        this.dealInfo = { notDeal, deal }
        this.initChart(res)
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取数据失败')
      })
    },
    initChart(val) {
      const chartData = [
        { value: val?.oneLevel, name: '一级告警' },
        { value: val?.twoLevel, name: '二级告警' },
        { value: val?.thirdLevel, name: '三级告警' }
      ]
      let option = {
        color: this.colorList,
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '15%',
          right: '0%',
          orient: 'vertical',
          textStyle: {
            color: '#fff',
          },
          formatter: (name) => {
            const item = chartData.find(a => a.name === name)
            return (item?.value || item.value === 0) ? name + ' ' + item?.value + '(次)' : '';
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            center: ['20%', '50%'],
            itemStyle: {
              borderRadius: 5
            },
            label: {
              show: false,
              position: 'center',
              color: '#fff'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 12,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: chartData
          }
        ]
      };

      let chartDom = document.getElementById('gjzt');
      if (!chartDom) {return}
      this.myChart = echarts.init(chartDom);
      this.myChart.setOption(option);
      window.addEventListener('resize', this.resizeFn, true);
    },
    resizeFn() {
      this.myChart.resize();
    }
  }
}
</script>

<style lang="scss" scoped>
  .gjzt-container {
    .progress-bar {
      .left-center-content-round-img {
        margin-left: 2%;
      }
      .progress-bar-container {
        .progress-bar-item {
          width: 100%;
          padding-left: 10%;
          padding-right: 5%;
          margin-top: 10px;
          box-sizing: border-box;
          .label-val {
            color: #ffffff;
            font-size: 12px;
          }
          .progress-bar-bg {
            background: rgba(253,221,96, 0.15);
            height: 4px;
            margin: 5px 0;
            box-sizing: border-box;
            position: relative;
            .progress-bar-value {
              background: linear-gradient( 90deg, rgba(253,221,96,0) 0%, #FDDD60 75%, #FFFFFF 100%);
              height: 100%;
              border-radius: 2px;
            }
          }
        }
        .unhandle {
          .progress-bar-bg {
            background: rgba(73,146,255, 0.15);
            .progress-bar-value {
              background: linear-gradient( 90deg, rgba(73,146,255,0) 0%, #4992FF 75%, #FFFFFF 100%);
            }
          }
        }
      }
    }
  }
</style>
